<template>
	<view id="change-phone">
		<!-- 旧手机 -->
		<view class="" v-if="isShowFirstStep">
			<view class="phone-group">
				<text class="phone-type">+86</text>
				<view class="phone-input">
					<input type="text" v-model="form.oldPhone" disabled="true" placeholder="请输入旧手机号" />
				</view>
			</view>
			<!--<view class="validate-code">
				<validate @success="setValidate1"></validate>
			</view>-->
			<view class="phone-group">
				<view class="code-input">
					<input type="text" v-model="form.oldPhoneCode" placeholder="请输入旧手机验证码" />
				</view>
				<view class="send-code-btn" @tap="getoldPhoneCode">
					{{oldPhoneCodeText}}<text v-if="oldPhoneCodeText!=='发送验证码'">s</text>
				</view>
			</view>
		</view>

		<view v-else>
			<view class="phone-group">
				<text class="phone-type">+86</text>
				<view class="phone-input">
					<input type="text" v-model="form.newPhone" placeholder="请输入新手机号" />
				</view>
			</view>
			<!--<view class="validate-code">
				<uni-validate  class="validate"  @success="setValidate2"></uni-validate>
			</view>-->
			<view class="phone-group">
				<view class="code-input">
					<input type="text" v-model="form.phoneCode" placeholder="请输入新手机验证码" />
				</view>
				<view class="send-code-btn" @tap="getNewPhoneCode">
					{{phoneCodeText}}<text v-if="phoneCodeText!=='发送验证码'">s</text>
				</view>
			</view>
		</view>
		<!-- 提交 -->
		<view class="btn-row">
			<button class="next-btn" @tap="changeStep">{{isShowFirstStep ? '下一步':'上一步'}}</button>
			<button class="sumbit-btn" @tap="bindLogin" v-if="!isShowFirstStep">确认修改</button>
		</view>


	</view>
</template>

<script>
	import {
		apiSendSms,
		apiChangePushPhone
	} from '../../../http/apis.js'
	/*import Validate from '../../components/graphVerification.vue'
	import UniValidate from '../../components/graphVerification.vue'*/
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		components: {
		    /*Validate,
			UniValidate*/
		},
		data() {
			return {
				form: {
					token: '',
					oldPhone: '',
					oldPhoneCode: '',
					newPhone: '',
					phoneCode: ''
				},
				oldPhoneCodeText: '发送验证码',
				phoneCodeText: '发送验证码',
				imgVaildCode: '',
				newImgVaildCode: '',
				// validateCode1: '',
				// validateCode2: '',
				isShowFirstStep: true

			}
		},
		onLoad(options) {
			this.form.oldPhone = options.phone
			this.form.token = this.token
		},
		methods: {
			changeStep(){
				if(this.isShowFirstStep){
					if(!this.form.oldPhoneCode){
						this.$msg.showToast('请先输入旧手机验证码')
						return
					}
				}
				this.isShowFirstStep = !this.isShowFirstStep
			},
			/*setValidate1(resp){
				this.validateCode1 = resp
			},
			setValidate2(resp){
				this.validateCode2 = resp
			},
			resetValidate1() {
			    this.validateCode1 = "";
			    LUOCAPTCHA && LUOCAPTCHA.reset();
			},
			resetValidate2() {
			    this.validateCode2 = "";
			    LUOCAPTCHA && LUOCAPTCHA.reset();
			},*/
			getNewPhoneCode(){
				if(!this.isPhoneNumRight()){
					return
				}
				/*if (!this.validateCode2) {
					this.$msg.showToast('请先点击上方的验证')
					return
				}*/
				if(this.phoneCodeText!=='发送验证码'){
					return
				}
				apiSendSms({
					phone:this.form.newPhone,
					codeType:'changePushPhone',
					// captcha: this.validateCode2
					captcha: ""
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.phoneCodeText = 60
						let timer=setInterval(()=>{
							this.phoneCodeText=this.phoneCodeText -1
							if(this.phoneCodeText==0){
								this.phoneCodeText='发送验证码'
								clearInterval(timer)
							}
						},1000)
					} else {
						this.$msg.showToast(res.data.msg)
						// this.resetValidate2()
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})

			},
			getoldPhoneCode(){
				/*if (!this.validateCode1) {
					this.$msg.showToast('请先点击上方的验证')
					return
				}*/
				if(this.oldPhoneCodeText!=='发送验证码'){
					return
				}
				apiSendSms({
					phone:this.form.oldPhone,
					codeType:'verifyPushPhone',
					// captcha: this.validateCode1
					captcha: ''
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.oldPhoneCodeText = 60
						let timer=setInterval(()=>{
							this.oldPhoneCodeText= this.oldPhoneCodeText - 1
							if(this.oldPhoneCodeText==0){
								this.oldPhoneCodeText='发送验证码'
								clearInterval(timer)
							}
						},1000)
					} else {
						this.$msg.showToast(res.data.msg)
						// this.resetValidate1()
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			isPhoneNumRight(){
				let reg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
				if(!this.form.newPhone){
					this.$msg.showToast('新手机号不能为空')
					return false
				}

				if( !reg.test(this.form.newPhone) ){
					this.$msg.showToast('请输入正确的手机号')
					this.form.newPhone = ''
					return false
				}
				return true
			},
			//校验短信验证码
			isMsgCodeRight(code, type){
				if(!code){
					var title = type == 'old' ? '请输入旧手机短信验证码' : '请输入新手机短信验证码'
					this.$msg.showToast(title)
					return false
				}
				if(code.length<4){
					this.$msg.showToast('验证码最短为 4 个字符')
					return false
				}
				return true
			},
			// 确认修改

			bindLogin() {
				if (!this.isMsgCodeRight(this.form.oldPhoneCode,'old')) {
				    return
				}
				if (!this.isPhoneNumRight()) {
				    return
				}
				if (!this.isMsgCodeRight(this.form.phoneCode,'new')) {
					return
				}
				apiChangePushPhone(this.form).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast('修改成功')
						let timer = setTimeout(()=>{
							uni.navigateTo({
								url: '../login/login',
                complete() {
								  clearTimeout(timer)
                }
							});
						},2000)
					}  else {
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})


			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}
	#change-phone {
		padding: 20px 40px;
	}

	.validate-code {
		margin-bottom: 32upx;
	}
	.validate-code1 {
		margin-bottom: 32upx;
	}
	.phone-type {
		display: inline-block;
		vertical-align: text-bottom;
		padding: 10upx 20upx;
		font-size: 28upx;
	}
	.phone-input {
		display: inline-block;
		padding: 20upx;
		border-left: 1px solid #e0e0e0;
		font-size: 28upx;
	}
	.phone-group {
		display: flex;
		border: 1px solid #e0e0e0;
		align-items: center;
		border-radius: 10upx;
		margin-bottom: 32upx;
	}
	.uni-input-placeholder {
		font-size: 28upx;
	}
	.code-input {
		padding: 20upx;
		flex: 1;
	}
	.send-code-btn {
		padding: 24upx 0;
		background: $theme-background-color;
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 28upx;
		width: 200upx;
	}
	.next-btn {
		margin: 30upx;
		background: red;
		color: #fff;
		margin-top: 80upx;
		font-size: 28upx;
		padding: 3px 0;
	}
	.sumbit-btn {
		margin: 30upx;
		background: $theme-background-color;
		color: #fff;
		margin-top: 30upx;
		font-size: 14px;
		padding: 3px 0;
	}
</style>

